EJS.安装与简介

Ejs,是一个纯 JavaScript所开发的一种高校式JavaScript模板引擎,其中“E”来代表可嵌入、高效、优雅、简单。可以帮助普通的JavaScript 代码来生成 HTML页面,EJS由于缓存和快速开发、用于调试以及语法简单和社区活跃备受开发者所喜爱。

安装

全局安装与浏览器支持安装

安装 EJS的方法分为两种,一种为通过使用 npm install ejs来安装,而另一种也可以通过ejs 仓库内的发行版来进行直接的引用,即全局安装和浏览器支持版本等。这里我们附上 EJS 仓库URL:https://github.com/mde/ejs,你可通过使用 https://github.com/mde/ejs/releases/tag/v3.1.6 来下载 EJS 3.1 版本。

全局安装

在一般的情况下,会使用npm install ejs来进行安装ejs,但本文中使用ejs-cli,即npm install ejs-cli,ejs与ejs-cli的区别就是 ejs-cli更加的简洁实在,没有 ejs那样的繁琐。通过使用ejs和ejs-cli的一段时间,将 .ejs 输出转换为 .html,ejs 基本上全部出错,而 ejs-cli则是一路绿灯,所以本文使用 ejs-cli 作为演示。

安装过程中的报错解决
package.json 没有的问题

如果在执行npm install ejs-cli的时候出现有类似与 package.json没有的问题,我们可以使用 npm init来执行生成package.json文件。

这个是会他会提示你进行配置,基本上我们可以直接全部使用回车键来进行跳过,也可以使用npm init -y来使用默认配置。

npm ERR! code ETIMEDOUT \ npm ERR! errno ETIMEDOUT

如果在安装中出现这种错误,我们可以使用npm install -g ejs-cli进行全局安装来解决此问题。

全局安装与本地安装的区别
在默认的情况下我们会使用本地安装,通过使用本地安装会在当前目录下生成一个 node_modules的目录,而全局安装则是将模块安装到全局,不会在项目的 node_modules目录下保存模块包。

输出

ejs-cli


当安装完成之后,我们可以通过使用 ejs-cli -h来查看ejs-cli的安装是否成功,如果没有成功可以查看npm是否安装失败来最后判断问题,当安装完成之后,我们可以在本地新建项目,且建立 index.ejs 文件,并写入(在此之前先建立一个/ejs目录用于存储ejs转换html后的文件):

1
2
3
4
5
<% title="Hello,world" %>

<h1>
Title: <%= title %>
</h1>

最后我们可以通过使用 ejs-cli -f index.ejs -o ejs/来在 /ejs 目录下生成 index.html文件文件。

浏览器支持


除了通过使用 ejs-cli 的方式来将 .ejs文件转换成 .html的方式,处于这种方式开发团队表示很繁琐,所以推出了另一种通过直接引入就可以写 ejs 语法的js扩展,再次我们需要新建一个index.html文件并写入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<p id="title"></p>
<script src="js/ejs.js"></script>
<script>
var html = ejs.render('<%="Hello,world!" %>','');
document.getElementById('title').innerHTML = html;
</script>
</body>
</html>

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布